<template id="HadPassOn">
  <div class="HadPassOn">
    <go-to-back :path="`/mail/productItem`" />
    <div class="pc">
      <div class="productItem">
        <p class="collectionTitle">查看藏品</p>
        <div class="productImage"><img :src="productData.image" /></div>
        <p class="productTitle">{{ productData.goods_name }}</p>
        <p class="collectionTitle phoneTitle">商品描述</p>
        <div class="productDesc">
          <span>{{ productData.goods_desc }}</span>
        </div>
      </div>
    </div>
    <div class="phone">
      <div class="productBg">
        <img class="phoneProductImg" :src="productData.image" />
        <img class="phoneProductBg" :src="phoneProductBg" />
        <div class="phoneOptions">
          <div class="phoneback">
            <img :src="phoneBackIcon" @click="gotoCurrentOwnedPage" />
          </div>
        </div>
      </div>
      <div class="phoneProductInfo">
        <img :src="phoneProductInfoBg" class="phoneProductInfoBg" />
        <p class="phoneProductTitle">{{ productData.goods_name }}</p>
        <div class="defaultPath" v-if="$route.query.icon != 1">
          <img :src="productData.icon" class="defaultHeadIcon" />
          <p class="defaultName">{{ productData.authorize }}</p>
        </div>
        <div class="phoneProductDesc" v-html="productData.goods_desc"></div>
      </div>
      <div class="phoneBottom">
        <div class="bottomContent">
          <md-button class="buyButton" disabled>
            <span>{{ btnShow }}</span>
          </md-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import {
  getGoodsInfoApi,
  transferTokenApi,
  getUserInfoApi,
  checkTransferUserApi,
  getOrderInfoApi,
  myPieceDetailApi
} from "@/api";
import { iscode } from "@/utils";
import { getCookie } from "@/utils/cookie";
import GoToBack from "./components/GoToBack.vue";
export default {
  name: "HadPassOn",
  components: { GoToBack },
  // 定义属性
  data() {
    return {
      phoneProductBg: require("@/assets/images/mobile/productBg.png"),
      phoneBackIcon: require("@/assets/images/mobile/phoneBack.png"),
      phoneProductInfoBg: require("@/assets/images/mobile/phoneProductInfoBg.png"),
      defaultHeadIcon: require("@/assets/images/mobile/defaultHeadIcon.png"),
      closeIcon: require("@/assets/images/mobile/closeIcon.png"),
      closeReset: require("@/assets/images/mobile/closeReset.png"),
      productData: {},
      btnShow: "已转赠"
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getOrderInfo() {
      let result = await getOrderInfoApi({ id: this.$route.query.order_id });
      if (iscode(result)) {
        const resStatus = result.result.status;
        this.productData = result.result.goods_info;
        this.$set(
          this.productData,
          "image",
          result.result.show_url + result.result.goods_info.images[0]
        );
        this.$set(this.productData, "icon", result.result.show_url + result.result.goods_info.icon);
        if (resStatus - 0 === 99) {
          this.btnShow = "已消耗";
        }
      }
    },
    // 获取碎片信息
    async myPieceDetail() {
      let res = await myPieceDetailApi({
        id: this.$route.query.order_id
      });
      if (iscode(res)) {
        const resData = res.result;
        this.btnShow = resData.botton.text;
        let fragInfo = JSON.parse(localStorage.getItem("fragInfo"));
        if (fragInfo) {
          this.$set(this.productData, "goods_name", fragInfo.name);
          this.$set(this.productData, "goods_desc", fragInfo.intro);
          this.$set(this.productData, "image", fragInfo.show_url + fragInfo.icon);
        }
      }
    },
    gotoCurrentOwnedPage() {
      if (this.$route.query.bought) {
        this.$router.push("/personalCurrentlyOwned");
      } else {
        this.$router.go(-1);
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.$route.query.icon == 1) {
      this.myPieceDetail();
    } else {
      this.getOrderInfo();
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.HadPassOn {
  p {
    margin: 0;
  }
  .pc {
    .productItem {
      .collectionTitle {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #4d4d4d;
        margin-bottom: 20px;
      }
      .productImage {
        text-align: center;
        img {
          width: 539px;
          height: 570px;
        }
        margin-bottom: 20px;
      }
      .productTitle {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        text-align: center;
        margin-bottom: 45px;
      }
      .productDesc {
        min-height: 120px;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        padding: 21px 15px;
      }
    }
  }
  .phone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .HadPassOn {
    .pc {
      display: none;
    }
    .phone {
      display: block;
      .productBg {
        display: block;
        width: 100%;
        position: relative;
        .phoneProductImg {
          width: 100%;
          // height: 720px;
        }
        .phoneProductBg {
          width: 100%;
          // height: 720px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .phoneOptions {
          padding: 0 30px;
          position: absolute;
          top: 34px;
          left: 0;
          z-index: 5;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .phoneback {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(3px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
      .phoneProductInfo {
        margin: -150px 30px 0 30px;
        min-height: 364px;
        background: #2b2c2d;
        border-radius: 12px;
        padding: 40px 30px;
        position: relative;
        margin-bottom: 360px;
        .phoneProductInfoBg {
          width: 390px;
          height: 302px;
          position: absolute;
          top: 3px;
          right: 3px;
        }
        .phoneProductTitle {
          position: relative;
          z-index: 2;
          font-size: 40px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 30px;
          line-height: 52px;
        }
        .defaultPath {
          display: flex;
          align-items: center;
          margin-bottom: 30px;
          .defaultHeadIcon {
            width: 46px;
            height: 46px;
            margin-right: 20px;
          }
          .defaultName {
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .phoneProductDesc {
          position: relative;
          z-index: 2;
          overflow: hidden;
          color: #959596;
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 44px;
          position: relative;
        }
      }
      .phoneBottom {
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
        .bottomContent {
          padding: 26px 30px 66px 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          .price {
            font-size: 50px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #00ffb0;
          }
          span {
            font-size: 32px;
            margin-right: 5px;
          }
          .buyButton {
            margin: 0;
            width: 690px;
            height: 72px;
            color: #1e2020 !important;
            background-color: transparent !important;
            background-image: url("../../../../assets/images/mobile/passOff.png");
            background-size: 100% 100%;
            font-size: 28px;
            font-weight: 600;
            box-shadow: none;
            span {
              font-size: 28px;
            }
          }
        }
      }
      .phonePop {
        padding: 40px 40px 0 40px;
        background: #2b2c2d;
        border-radius: 24px 24px 0px 0px;
        .popTop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 80px;
          p {
            font-size: 36px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
          .closeIcon {
            width: 24px;
            height: 24px;
          }
        }
        .popCenter {
          .smallTitle {
            font-size: 32px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
          .popAddress {
            margin-top: 52px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 44px;
            border-bottom: 2px solid #333333;
            margin-bottom: 58px;
            input {
              padding: 0;
              background: #2b2c2d;
              border: none;
              font-size: 32px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              width: 95%;
            }
            .closeReset {
              width: 28px;
              height: 28px;
            }
          }
          .popBottom {
            margin-bottom: 162px;
            .popPassword {
              margin-top: 40px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              input {
                width: 103px;
                height: 116px;
                background: rgba(255, 255, 255, 0.15);
                border: none;
                color: #ffffff;
                font-size: 24px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                text-align: center;
              }
            }
          }
          .passOnButton {
            margin: 0;
            width: 100%;
            height: 88px;
            border-radius: 6px;
            color: #1e2020 !important;
            background-color: #00ffb1 !important;
            background-size: 100% 100%;
            font-weight: 500;
            box-shadow: none;
            span {
              font-size: 32px;
            }
          }
        }
      }
      /deep/.van-overlay {
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
